<template>
  <div class="inputWrapper">
    <!--:class="{ error: !isOk }"  vue的一个属性添加方法  key:value  isOk为false时 为输入框添加类名error-->
    <input
      :class="{ error: !isOk }"
      :type="type"
      :placeholder="placeholder"
      v-model="value"
      @blur="showErrorMsg"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      isOk: true,
    };
  },
  props: ["placeholder", "type", "rule", "ellMsg"],
  watch: {
    // 效验输入的内容是否符合正则表达式 符合为true添加类名error 让输入框变红提醒用户
    value(newValue) {
      if (this.rule.test(newValue)) {
        this.isOk = true;
      } else {
        this.isOk = false;
      }

      // 校验以后, 其实这个数据是父组件发请求时需要用的
      // 我们要把数据往父组件发出去
      // 再多的输入框,用户也只能同时对一个输入框进行输入
      this.$emit("setValue", newValue);
    },
  },
  methods: {
    // 防御编程 输入框变红提醒不了的用户 用文字提醒
    showErrorMsg() {
      if (!this.isOk) {
        this.$toast(this.ellMsg);
      }
    },
  },
};
</script>

<style lang='less' scoped>
.inputWrapper {
  padding-bottom: 16/360 * 100vw;
  input {
    width: 100%;
    height: 48/360 * 100vw;
    line-height: 48/360 * 100vw;
    font-size: 18/360 * 100vw;
    border: none;
    outline: none;
    border-bottom: 1px solid #333;
  }
  .error {
    border-color: red;
  }
}
</style>
